<template>
  <div class="m_right">
    <p></p>
    <div class="mem_tit">个人订单</div>
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(order, index) in orderList"
        :key="order.id"
        :name="index + 1"
      >
        <!-- :title="`用户名:${orderGroup[0].loginName} 订单号:${orderGroup[0].serialNumber} 地址:${orderGroup[0].userAddress} 商品名:${orderGroup[0].name}`" -->
        <template slot="title">
          <table class="orderTable">
            <tr>
              <td>用户名：{{ order.loginName }}</td>
              <td>订单号: {{ order.serialNumber }}</td>
              <td style="line-height: 1rem">
                地址: &nbsp;&nbsp;{{ order.userAddress }}
              </td>
              <td>￥: &nbsp;&nbsp;{{ order.cost }}</td>
              <td>
                <span
                  :class="
                    order.isPay == -1
                      ? 'status1'
                      : order.isPay == 0
                      ? 'status2'
                      : order.isPay == 1
                      ? 'status3'
                      : 'status4'
                  "
                  >{{ getOrderStatus(order.isPay) }}</span
                >
              </td>
            </tr>
          </table>
        </template>
        <div>
          <el-table :data="order.orderDetailList" class="orderDetailTable">
            <el-table-column
              label="商品名称"
              header-align="center"
              align="center"
              min-width="150"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="商品图片"
              header-align="center"
              align="center"
              min-width="180px"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="url + scope.row.fileName"
                  fit="cover"
                  ><div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i></div
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              header-align="center"
              align="center"
              min-width="180px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="价格"
              header-align="center"
              align="center"
              min-width="180px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.cost }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div
            style="
              border: 1px solid #ddd;
              padding: 1rem;
              text-align: center;
              border-radius: 4px;
            "
            v-if="order.isPay == 1"
          >
            <a
              href="javascript:;"
              @click="refund(order.id, order.serialNumber, order.cost)"
              style="color: #333; text-decoration: none; font-weight: bold"
              >点击<span style="color:red">退款</span></a
            >
          </div>
          <div
            style="
              border: 1px solid #ddd;
              padding: 1rem;
              text-align: center;
              border-radius: 4px;
            "
            v-if="order.isPay == 0"
          >
            <a
                href="javascript:;"
                @click="closeOrder(order.id)"
                style="color: #333; text-decoration: none; font-weight: bold"
                >点击<span style="color:green">支付订单</span></a
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a
              href="javascript:;"
              @click="closeOrder(order.id)"
              style="color: #333; text-decoration: none; font-weight: bold"
              >点击<span style="color:red">关闭订单</span></a
            >
          </div>
          <div
            style="
              border: 1px solid #ddd;
              padding: 1rem;
              text-align: center;
              border-radius: 4px;
            "
            v-if="order.isPay == -1"
          >
            <a
              href="javascript:;"
              @click="deleteOrder(order.id)"
              style="color: #333; text-decoration: none; font-weight: bold"
              >点击<span style="color:red">删除</span>订单</a
            >
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <br />
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page="1"
        layout="prev, pager, next, jumper"
        :total="pageInfo.total"
        ><!-- 注意这里pageInfo.total是来自pageHelper的pageinfo，而不是自己封装的pageinfo -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Collapse,
  CollapseItem,
  Tag,
  Table,
  TableColumn,
  Icon,
  Image,
  Pagination,
} from "element-ui";
Vue.use(Tag);
Vue.use(Icon);
Vue.use(Image);
Vue.use(Table);
Vue.use(Pagination);
Vue.use(TableColumn);
Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 3,
      orderList: [],
      pageInfo: {},
      activeNames: [],
      url: sessionStorage.getItem("imagesDir"),
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllOrderList();
    },

    getAllOrderList() {
      this.$axios({
        url: "/api/order/all",
        method: "post",
        data: {
          loginName: sessionStorage.getItem("loginName"),
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      }).then((rs) => {
        console.log("所有订单...", rs);
        this.pageInfo = rs.data.pageInfo;
        this.orderList = rs.data.pageInfo.list;
      });
    },
    getOrderStatus(status) {
      //-1: 已取消， 0：未付款， 1：已付款，2: 已退款
      return status == -1
        ? "已取消"
        : status == 0
        ? "待付款"
        : status == 1
        ? "已付款"
        : "已退款";
    },
    refund(id, serialNumber, cost) {
      if (!confirm("是否要退款？")) {
        return;
      }
      this.$axios({
        url: "/api/alipay/tk",
        method: "post",
        data: {
          orderId: id,
          cost,
          serialNumber,
        },
      }).then((rs) => {
        if (rs.data.code == 5200) {
          this.$message.success(rs.data.msg);
          window.location.reload();
        } else {
          this.$message.error(rs.data.msg);
        }
      });
    },
    closeOrder(id) {
      this.$messageBox
        .confirm("是否要关闭订单？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.$axios({
            url: "/api/order/close",
            method: "post",
            data: {
              orderId: id,
            },
          }).then((rs) => {
            console.log(rs);
            if (rs.data.code == 5200) {
              this.$message.success(rs.data.msg);
              window.location.reload();
            } else {
              this.$message.error(rs.data.msg);
            }
          });
        });
    },
    /* deleteOrder(id) {
      this.$messageBox
        .confirm("是否要删除订单？删除后将无法恢复！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.$axios({
            url: "/api/order/delete",
            method: "post",
            data: {
              orderId: id,
            },
          }).then((rs) => {
            if (rs.data.code == 5200) {
              this.$message.success(rs.data.msg);
              window.location.reload();
            } else {
              this.$message.error(rs.data.msg);
            }
          }).catch((action) => {
              // 用户点击了“取消”
              if (action === 'cancel') {
                this.$message.info('已取消删除');
              }
          });
        });
    }, */
    deleteOrder(id) {
      this.$messageBox
        .confirm("是否要删除订单？删除后将无法恢复！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          // 用户点击"确定"后执行这里
          this.$axios({
            url: "/api/order/delete",
            method: "post",
            data: {
              orderId: id,
            },
          }).then((rs) => {
            if (rs.data.code == 5200) {
              this.$message.success(rs.data.msg);
              window.location.reload();
            } else {
              this.$message.error(rs.data.msg);
            }
          }).catch((error) => {
            this.$message.error('删除请求失败，请检查网络');
            console.error('API Error:', error);
          });
        })
        .catch((action) => {
          if (action === 'cancel' || action === 'close') {
            this.$message.info('已取消删除');
          }
        });
    }
  },
  created() {
    let type = sessionStorage.getItem("type");
    if(!type) {
      this.$message.error("权限不足，将回到首页！")
      this.$router.push({
        name: 'IndexCenter'
      })
      return;
    }
    this.getAllOrderList();
  },
};
</script>

<style>
.orderTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}
.orderTable td {
  border: 0.1px solid rgba(94, 92, 92, 0.137);
  text-align: left;
  padding-left: 1rem;
}
.orderTable tr:nth-of-type(1) {
  background-color: #f0f0f0;
}
.orderTable td:nth-of-type(1) {
  width: 20%;
}
.orderTable td:nth-of-type(2) {
  width: 35%;
}
.orderTable td:nth-of-type(3) {
  width: 25%;
}
.orderTable td:nth-of-type(4) {
  width: 10%;
}
.orderTable td:nth-of-type(5) {
  width: 10%;
}
.orderDetailTable {
  width: 100%;
}
.page {
  width: 100%;
  padding: 2rem;
  text-align: center;
}
.status1 {
  background-color: #f56c6c;
  border-radius: 4px 4px;
  padding: 0.2rem;
}
.status2 {
  background-color: #85ce61;
  border-radius: 4px 4px;
  padding: 0.2rem;
}
.status3 {
  background-color: #a6a9ad;
  border-radius: 4px 4px;
  padding: 0.2rem;
}
.status4 {
  background-color: #cb8f5e;
  border-radius: 4px 4px;
  padding: 0.2rem;
}
</style>